<div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
        <ng-container *ngFor="let route of mainMenus">
            <li routerLinkActive="uk-active">
                <a [routerLink]="route.path">{{route.name}}</a>
                <div class="uk-navbar-dropdown"
                     *ngIf="route.children && route.children.length">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <ng-container *ngFor="let subMenu of route.children">
                            <li *ngIf="subMenu"
                                routerLinkActive="uk-active">
                                <a [routerLink]="subMenu.path">{{subMenu.name}}</a>
                            </li>
                        </ng-container>
                    </ul>
                </div>
            </li>
        </ng-container>
        <li *ngIf="!currentUser"
            routerLinkActive="uk-active">
            <a (click)="goToLogin()">用户登录</a>
        </li>
        <li *ngIf="enableSearch">
            <a class="uk-navbar-toggle"
               #searchButton
               href="#modal-full"
               uk-search-icon>
            </a>
        </li>
    </ul>
    <div *ngIf="currentUser"
         class="uk-navbar-item uk-flex-stretch uk-visible@m">
        <a class="uk-flex uk-flex-middle">
            <img [attr.src]="'assets/images/' + currentUser.user.avatar"
                 width="30"
                 [ngStyle]="{
                  width: '30px',
                  height: '30px'
                 }"
                 class="uk-border-circle">
        </a>
        <div class="uk-navbar-dropdown"
             uk-drop="cls-drop: uk-navbar-dropdown; mode: click; pos: bottom-right; flip: x">
            <ul class="uk-nav uk-navbar-dropdown-nav">
                <li class="uk-h4 uk-text-truncate uk-margin-remove">
                    你好，{{currentUser.user.name}}
                </li>
                <li class="uk-text-muted uk-text-truncate">
                    @{{currentUser.user.username}}
                </li>
                <li class="uk-nav-divider"></li>
                <li>
                    <button class="uk-button uk-button-link"
                            (click)="logOut()">
                        退出登录
                    </button>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="modal-full"
     class="uk-modal-full"
     uk-modal>
    <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle"
         uk-height-viewport>
        <button
                class="uk-modal-close-full"
                type="button"
                uk-close>
        </button>
        <app-common-main-menu-search></app-common-main-menu-search>
    </div>
</div>
